<template>
	<view class="">
		<view class="searchBar" v-if="!poiPageShow" :style="{ top: top, left: left }" @touchend.prevent="handeSearchPoi">
			<text class="distance_text">{{ distace }}</text>
			<uni-icons type="search" size="22" color="#ffffff"></uni-icons>
		</view>
		<search-poi v-if="poiPageShow"></search-poi>
	</view>
</template>

<script>
import searchPoi from '../searchPoi.vue';

export default {
	name: 'searchPoi',
	components: {
		searchPoi
	},
	props: {
		bottom: {
			type: String,
			default: 'auto'
		},
		left: {
			type: String,
			default: '200rpx'
		},
		right: {
			type: String,
			default: 'auto'
		},
		top: {
			type: String,
			default: '120rpx'
		}
	},
	data() {
		return {
			address: '',
			city: '',
			keyHeight: 0,
			poiPageShow: false
			// 移除 KeyboardEvent 的声明，改用私有变量
		};
	},

	methods: {
		onchange(e) {
			console.log('地址', e);
			this.city = e.detail.value[1].text;
			this.address = e.detail.value[2]?.text;
		},
		close() {
			this.$emit('close');
			uni.hideKeyboard();
		},
		handeSearchPoi() {
			console.log('2222224');
			this.poiPageShow = true;
		}
	}
};
</script>

<style lang="scss">
.searchBar {
	position: fixed;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 200rpx;
	border-radius: 30rpx;
	height: 60rpx;
	background-color: rgba(85, 170, 255, 1);
}
.search-txt {
	font-size: 28rpx;
	color: #ffffff;
}
.distance_text {
	font-size: 28rpx;
	color: #ffffff;
}
.search-box {
	display: flex;
	align-items: center;
	flex-direction: row;
}
</style>
